<template>
  <div class="wrap">
    <div class="title">
      <img src="@/assets/home/shebei_preview@3x.png" />
    </div>
    <div class="list-box">
      <div class="item" v-for="(item, index) in homeData.equipmentOverviewData">
        <div class="left-box">
          <img v-if="index === 0" src="@/assets/home/shebei-icon1@2x.png" />
          <img v-if="index === 1" src="@/assets/home/shebei-icon2@2x.png" />
          <img v-if="index === 2" src="@/assets/home/shebei-icon3@2x.png" />
          <img v-if="index === 3" src="@/assets/home/shebei-icon4@2x.png" />
          <p class="pa">{{ item.title }}</p>
        </div>
        <div class="right-box">
          <span class="spa">{{ item.value }}</span>
          <span class="spb">/{{ item.all }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useHomeStore } from '@/Store/homeStore';


const homeData = useHomeStore();

</script>

<style lang="scss" scoped>
.color_1 {
  color: rgba(255, 235, 59, 1);
}
.color_2 {
  color: rgba(0, 251, 255, 1);
}
.wrap{
  border-radius: 11px;
  border: 1px solid rgba(35, 135, 217, 1);
  margin-top: 7px;
  background: linear-gradient(90deg, rgba(33, 100, 156, 0.5) 0%, rgba(29, 70, 143, 0.25) 100%);
  padding-bottom: 4px;
  .title{
    width: 178px;
    height: 34px;
    margin: 0 auto;
    margin-top: 14px;
    margin-bottom: 5.8px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .list-box{
    .item {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 12px;
      .left-box{
        display: flex;
        flex-direction: column;
        margin-right: 21px;
        margin-left: 39px;
        img {
          width: 51px;
          height: 51px;
          margin-bottom: 4px;
        }
        p {
          margin: 0;
        }
        p.pa {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20.27px;
          color: rgba(0, 251, 255, 1);
          text-align: left;
          vertical-align: top;
          white-space: nowrap;
        }
      }
      .right-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 51px;
        span.spa {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 27.44px;
          color: rgba(255, 235, 59, 1);
          /** 文本2 */
          font-size: 20px;
          font-weight: 700;
        }
        span.spb {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 27.44px;
          color: rgba(0, 251, 255, 1);
          /** 文本2 */
          font-size: 20px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>